﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<fmt:setBundle basename="ApplicationMessage" />

<div class="row form-horizontal ihg-form">
  <div class="ihg-content-layout">
    <div class="row form-horizontal ihg-form" style="padding: 0px;">
    
      <div class="col-xs-6">
        <div class="timeline-overflow" style="overflow-y: initial;">
          <ul class="col-xs-1 timeline-wrap list-unstyled" style="width: 15px;">
            <li class="timeline-item" data-time="8:30">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="8:35">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="8:40">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="8:45">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="8:50">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item has-content bg-color-pink" data-time="10:30">
              <div class="timeline-point">10:30</div>
            </li>
            <li class="timeline-item" data-time="11:45">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="11:50">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="11:55">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="12:00">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="12:05">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="12:10">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="12:15">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="12:20">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="12:25">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="12:30">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="12:35">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="12:40">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="12:45" >
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="12:50">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="12:55">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="13:00">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="13:05">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="13:10">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="13:15" >
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="13:20">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item has-content bg-color-pink" data-time="13:30">
              <div class="timeline-point">13:30</div>
            </li>
            <li class="timeline-item" data-time="13:35">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="13:40">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="13:45">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="13:50">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="13:55" >
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="14:00">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="14:05">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="14:10">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="14:15">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="14:20">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="14:25">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item has-content bg-color-pink" data-time="13:30">
              <div class="timeline-point">16:00</div>
            </li>
            <li class="timeline-item" data-time="13:35">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="13:40">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="13:45">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="13:50">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="13:55" >
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="14:00">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="14:05">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="14:10">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="14:15">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="14:20">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="14:25">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item has-content bg-color-pink" data-time="13:30">
              <div class="timeline-point">16:30</div>
            </li>
            <li class="timeline-item" data-time="13:35">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="13:40">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="13:45">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="13:50">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="13:55" >
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="14:00">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="14:05">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="14:10">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="14:15">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="14:20">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="14:25">
              <div class="timeline-point"></div>
            </li>
          </ul>
          
          <div class="col-xs-10 timeline-content-wrap">
          
            <div class="timeline-content"  style="top: 80px; height: 90px;">
              <a href="${ctx.host}/sessions/${session.id}/develope-workshop" class="alink" data-start="${taskMap['Development Workshop'].startDate.time}" data-end="${taskMap['Development Workshop'].endDate.time}">
                <h2 class="timeline-title"> 
                  <p class="timeline-time"><i class="glyphicon glyphicon-time"></i>10:30-12:00</p>
                </h2>
                <div class="description">Development Workshop & Notifications [10:30-12:00] 90min </div>
              </a>
            </div>
            
            <div class="timeline-content"  style="top: 350px; height: 90px;">
              <a href="${ctx.host}/sessions/${session.id}/coach-skill" class="alink" data-start="${taskMap['Assessor Coaching Skills Recap'].startDate.time}" data-end="${taskMap['Assessor Coaching Skills Recap'].endDate.time}">
                <h2 class="timeline-title"> 
                  <span class="timeline-time"><i class="glyphicon glyphicon-time"></i>13:30-14:00</span>
                </h2>
                <div class="description">Assessor coaching skills recap & Notifications [13:30-14:00] 30min</div>
              </a>
            </div>
            
            <div class="timeline-content"  style="top: 510px; height: 90px;">
              <a href="${ctx.host}/sessions/${session.id}/assessor-closing-session" class="alink" data-start="${taskMap['Assessor Closing Session'].startDate.time}" data-end="${taskMap['Assessor Closing Session'].endDate.time}">
                <h2 class="timeline-title"> 
                  <span class="timeline-time"><i class="glyphicon glyphicon-time"></i>16:00-16:30</span>
                </h2>
                <div class="description">Assessor Closing Session [16:00-16:30] 30min</div>
              </a>
            </div>
            
            <div class="timeline-content"  style="top: 660px; height: 90px;">
              <a href="${ctx.host}/sessions/${session.id}/delegate-closing-session" class="alink" data-start="${taskMap['Delegate Closing Session'].startDate.time}" data-end="${taskMap['Delegate Closing Session'].endDate.time}">
                <h2 class="timeline-title"> 
                  <span class="timeline-time"><i class="glyphicon glyphicon-time"></i>16:30-17:00</span>
                </h2>
                <div class="description">Delegate Closing Session [16:30-17:00] 30min</div>
              </a>
            </div>
            
          </div>
        </div>
      </div>
      
      <div class="col-xs-6" style="padding-right:30px;">
        <table class="table table-striped ihg-table tab-pane">
          <c:forEach var="participator" items="${participators}">
            <thead>
              <tr>
                <th>Delegate Name</th>
                <th>Assessor Name</th>
                <th>Feedback Time</th>
                <th>Reports</th>
              </tr>
            </thead>
            <tbody>
              <c:forEach var="delegateParticipator" items="${participators[participator.key]}">
                <tr>
                  <td>${delegateParticipator.delegateName}</td>
                  <td>${delegateParticipator.assessorName}</td>
                  <td>
                    <c:set var="feedbackTask" value="${feedbackTaskMap[delegateParticipator.delegateIdString]}" />
                    <fmt:formatDate pattern="HH:mm" value="${feedbackTask.startDate}"/>&nbsp;-&nbsp;<fmt:formatDate pattern="HH:mm" value="${feedbackTask.endDate}"/>
                  </td>
                  <td>
                    <c:set var="reportTask" value="${reportTasks[delegateParticipator.delegateIdString]}"/>
                    <c:choose>
                      <c:when test="${(not empty reportTask) and reportTask.status.finish}">
                        <a href="${ctx.host}/sessions/${session.id}/peer-calibrations/${sessionCalibrationMap[delegateParticipator.delegateIdString].id}/development-day-report-view">View</a>
                      </c:when>
                      <c:otherwise>
                        <img src="${ctx.resource}/images/error.png" style="width:13px;margin-right:10px;">
                      </c:otherwise>
                    </c:choose>
                  </td>
                </tr>
              </c:forEach>
            </tbody>
          </c:forEach>
        </table>
      </div>
      
    </div>
  </div>
</div>